'use strict';
import { Aiui } from "../static";

var LoadingClass =function(ele,options){
    var that = this;
    that.create(ele,options)
    return that;
};

LoadingClass.prototype.create = function(ele,options){
    var that = this;
    that.reference = ele;
    that.options = aiui.extend({},{
        text:'',
        icon:'',
    },options);
    if(!that.reference){
        aiui.error(' No available DOM');
        return;
    }
    var template = ['<div class="aiui-loading-mask">',
            '<div class="aiui-loading-spinner">',
                '{{if icon}}',
                '{{icon}}',
                '{{else}}',
                '<svg viewBox="25 25 50 50" class="circular"><circle cx="50" cy="50" r="20" fill="none" class="path"></circle></svg>',
                '{{/if}}',
                '{{if text}}',
                '<p>{{text}}</p>',
                '{{/if}}',
            '</div>',
    '</div>'].join('');
    that.dom = Aiui.parseDom(aiui.render(template,that.options))[0];
    return that;
}

LoadingClass.prototype.show = function(){
    var that = this;
    that.reference.append(that.dom);
    Aiui.addClass(that.reference,'aiui-loading-parent-relative');
    that.transition = aiui.transition(that.dom,{
        name:'aiui-loading-fade',
        onleaved:function(){
            Aiui.removeClass(that.reference,'aiui-loading-parent-relative');
            that.dom.remove();
        }
    })
    that.transition.show();
}
LoadingClass.prototype.close = function(){
    var that = this;
    that.transition.hide();
}
export default function(ele,options){
    return new  LoadingClass(ele,options);
}